<template>
  <div class="todoapp">
    <TodoHeader @addTask="addTaskHandler"></TodoHeader>
    <TodoMain @delTask="delTaskHandler" :list="showList"></TodoMain>
    <TodoFooter @changeTask="changeTaskHandler" :list="showList"></TodoFooter>
  </div>
</template>

<script>
/*思路:
目标1:渲染数据:
1.1:在app.vue中准备数据并传入TodoMain.vue
1.2:在子组件中使用v-for循环渲染
1.3:使用v-model绑定完成状态
1.4:使用动态class绑定完成样式

目标2:添加数据:
2.1:在TodoHeader.vue中给文框双向绑定任务名
2.2给文本框绑定键盘按下事件,,捕获enter键
2.3:用户按下enter键后,传递数据到app.vue
2.4:app.vue接收数据,并将其添加list
2.5:在TodoHeader.vue中添加非空验证,其次清空文本框

目标3:删除数据:
3.1:在TodoMain.vue中给删除按钮绑定点击事件,传入id
3.2:将id传给app.vue
3.3:app.vue中根据id找到对应的数据删除

目标4:统计数量
4.1:在app.vue中将list传入TodoFooter.vue
4.2:使用插值表达式渲染

目标5:切换数据
5.1:在TodoFooter.vue中定义状态 isSel,取值范围是all/yes/no
5.2:动态绑定class,根据状态来决定那个a标签用selected类名
5.3:给a标签绑定点击事件,点谁就切换对应的状态
5.4在TodoFooter.vue中将isSel传递给app.vue
5.5父组件收到isSel后,保存到data
5.6:app.vue中定义计算属性,根据isSel中的状态来筛选数据并返回
 */

// 引入组件
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";

export default {
  // 注册组件
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      list: [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
      isSel: "all",
    };
  },
  methods: {
    addTaskHandler(taskname) {
      // 将子组件传递过来的任务添加至list中
      this.list.push({
        id: this.list[this.list.length - 1].id + 1,
        name: taskname,
        isDone: false,
      });
    },
    delTaskHandler(id) {
      /* 根据id找到对应的数据并删除
      this.list.forEach((item, index) => {
        if (item.id === id) {
          this.list.splice(index, 1)
        }
      }) */
      // 根据自定义的条件查找索引:findIndex
      // 调用这个方法也会循环数组, 有一个返回值是索引
      const index = this.list.findIndex((item) => item.id === id);
      this.list.splice(index, 1);
    },
    changeTaskHandler(isSel) {
      // console.log(isSel)
      this.isSel = isSel;
    },
  },
  computed: {
    showList() {
      // 根据当前最新的状态来对list进行筛选
      if (this.isSel === "yes") {
        // filter数组筛选/过滤
        // 返回一个新数组, 会将循环过程中符合条件的加入,最后返回新数组
        // return this.list.filter(item => item.isDone)
        let newArr = [];
        // 如果当前是yes就把isDone为tru的数据放到新数组中返回
        this.list.forEach((item) => {
          if (item.isDone) {
            newArr.push(item);
          }
        });
        return newArr;
      } else if (this.isSel === "no") {
        // return this.list.filter(item => !item.isDone)
        // 如果当前是no就把isDone为false的数据放到数组中返回
        let newArr = [];
        this.list.forEach((item) => {
          if (!item.isDone) {
            newArr.push(item);
          }
        });
        return newArr;
      } else {
        // 如果当前是all就全部返回
        return this.list;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>